﻿
@{
    ViewData["Title"] = "JavaSriptDemo";
    Layout = "~/Views/Shared/_FormWhite.cshtml";
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body >
    <h2>JavaScript Demos</h2>
    <h2>我的第一个 JavaScript 程序</h2>
    <p id="demo">这是一个段落</p>
    <button type="button" onclick="displayDate()">显示日期</button>
    <p id="demo1">
        JavaScript 能改变 HTML 元素的内容。
    </p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <img id="myimage" onclick="changeImage()" src="/image/pic_bulboff.gif" width="100" height="180">
    <p>点击灯泡就可以打开或关闭这盏灯</p>

    @*<div ng-app="myApp" ng-controller="myCtrl">
            名字: <input ng-model="name">
        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
                $scope.name = "John Doe";
            });
        </script>*@

    @*<div ng-app="" data-ng-init="quantity=1;price=5;names=['Jani','Hege','Kai']">
            <h3>1.输入绑定：</h3>

            <p>名字 : <input type="text" ng-model="name"></p>
            <p>年龄 : <input type="text" ng-model="age"></p>
            <h1>Hello {{name}} you age is {{age}}</h1>
            <p ng-bind="name"></p>
            <p ng-bind="age"></p>

            <h3>2.价格计算器：</h3>
            数量: <input type="number" ng-model="quantity">
            价格: <input type="number" ng-model="price">
            <p><b>总价:</b> {{quantity * price}}</p>

            <h3>3.使用 ng-repeat 来循环数组</h3>
            <ul>
                <li data-ng-repeat="x in names">
                    {{ x }}
                </li>
            </ul>
        </div>*@


    <div  ng-app="myApp" ng-controller="myCtrl" >

        <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
        </select>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.names = ["Google", "Runoob", "Taobao"];
        });
    </script>

    <p>该实例演示了 ng-options 指令的使用。</p>






</body>
</html>

<script >

    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }

    function myFunction() {
        x = document.getElementById("demo1");  // 找到元素
        x.innerHTML = "Hello JavaScript!" + Date();    // 改变内容
    }

    function changeImage() {
        element = document.getElementById('myimage')
        if (element.src.match("bulbon")) {
            element.src = "/image/pic_bulboff.gif";
        }
        else {
            element.src = "/image/pic_bulbon.gif";
        }
    }
</script>
